<!-- 城市列表选择组件 -->
<template>
    <div>
        <el-cascader :placeholder="placeholder" separator="-" @change="change" filterable clearable :props="{
            multiple:multiple,
            lazy: true,
            checkStrictly: true,
            lazyLoad: loadCity,
            label: 'name',
            value: 'id',
            emitPath: false,
        }" :style="setStyle" v-model="selectedValue"></el-cascader>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex';

    export default {
        props: {
            value: {
                type: [Number, String, Array],
                default: null
            },
            setStyle: {
                type: Object,
                default:()=>{
                    return {
                        "margin-right": "20px",
                        "width": "100%"
                    }
                }
            },
            placeholder:{
                type: String,
                default: "请选择地区"
            },
            // 是否多选
            multiple:{
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                selectList: [],
                selectedValue: this.value // 使用本地 data 属性来保存选中的值
            }
        },
        watch: {
            value: {
                immediate: true,
                handler(newVal) {
                    this.selectedValue = newVal; // 监听外部变化以保持同步
                }
            }
        },
        computed: {
            ...mapState({
                loading: state => state.loading,
                operator: state => state.operator
            }),
        },
        mounted() {
            
        },
        methods: {
            //加载城市
            loadCity(node, resolve) { 
                if (node.level == 0) {
                    let pid = 0
                    if(this.operator){
                        console.log('this.operator----cityList',this.operator)
                        pid = this.operator.city.cityid
                    }

                    this.$axios.post('/city/List', {
                        pageIndex: 1,
                        pageSize: 9999,
                        pId: pid
                    }).then((res) => {
                        node = res.rows?.map(function (c) {
                            return {
                                id: c.id,
                                name: c.name
                            }
                        });
                        resolve(node);
                    })
                } else {
                    if (node.level < 5) {
                        this.$axios.post('/city/List', {
                            pageIndex: 1,
                            pageSize: 9999,
                            pId: node.value
                        }).then((res) => {
                            node = res.rows?.map(function (c) {
                                return {
                                    id: c.id,
                                    name: c.name
                                }
                            });
                            resolve(node);
                        })
                    } else {
                        resolve();
                    }
                }
            },
            change(val){
                this.$emit('change', this.selectedValue); // 触发 change 事件传递新值
                this.$emit('input', this.selectedValue); // 如果支持 v-model，则也触发 input 事件
            }
        }
    }
</script>